<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="渠道类型">
                    <select-app-source-type v-model="search.source_type" :multiple="true"></select-app-source-type>
                </el-form-item>
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source" :type="search.source_type" :multiple="true"></select-app-source>
<!--                    <select-app-source v-model="search.sourceMulti" :type="search.source_type" :multiple="true" v-show="activeName === 'roiChart'"></select-app-source>-->
                </el-form-item>
                <el-form-item label="优化师" prop="spreadUser">
                    <select-spread-user v-model="search.spreadUser" :multiple="true"></select-spread-user>
                </el-form-item>
                <el-form-item title="日期" prop="day">
                    <picker-date-range v-model="search.day" :clearable="false"></picker-date-range>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="汇总表" name="total" :lazy="true"><total ref="total" :search="search"/></el-tab-pane>
            <el-tab-pane label="明细表" name="detail" :lazy="true"><detail ref="detail" :search="search"/></el-tab-pane>
            <el-tab-pane label="实际ROI" name="roi" :lazy="true"><roi field="roi" ref="roi" :search="search"/></el-tab-pane>
            <el-tab-pane label="市场ROI" name="roiMarket" :lazy="true"><roi field="roiMarket" ref="roiMarket" :search="search"/></el-tab-pane>
            <el-tab-pane label="走势对比图" name="roiChart" :lazy="true"><roi-chart ref="roiChart" :search="search"/></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import SelectAppSourceType from '~/components/Select/app-source-type';

import Total from './total'
import Detail from './detail'
import Roi from './roi'
import RoiChart from './roi-chart'
import SelectSpreadUser from '~/components/Select/spread-user';

export default {
    data() {
        return {
            activeName: 'total',
            search: {
                source_type: '',
                source: '',
                day: [],
            },
            searchFieldChangeTime: 0,
            searchTime: {

            },
        };
    },
    components: {
        SelectAppSourceType,
        SelectSpreadUser,
        Total,
        Detail,
        Roi,
        RoiChart,
    },
    watch: {
        search: {
            handler() {
                this.searchFieldChangeTime = parseInt(new Date().getTime()/1000);
            },
            deep: true,
        },
        // 'search.source' (val) {
        //     if (val > 0) this.search.source_type = '';
        // },
        // 'search.source_type' (val) {
        //     if (val > 0) this.search.source = '';
        // },
        // activeName (val) {
        //     if (!['roi', 'roiMarket', 'roiChart'].includes(val)) {
        //         this.source_type_bak = this.search.source_type;
        //         this.search.source_type = '';
        //     } else {
        //         this.search.source_type = this.source_type_bak;
        //     }
        // },
    },
    methods: {
        // 切换时检查上次时间是否小于表单修改时间
        handleClick(tab, event) {
            if (this.searchTime[this.activeName] && this.searchTime[this.activeName] < this.searchFieldChangeTime) {
                this.$refs[this.activeName].handleSearch();
            }
            this.syncTabSearchTime();
        },
        initSearchDate() {
            this.search.day = [
                moment().add(-1, 'M').startOf('d').unix(),
                moment().add(-1, 'd').endOf('d').unix(),
            ];
        },
        handleSearch() {
            this.$nextTick(() => {
                this.syncTabSearchTime();
                this.$refs[this.activeName].handleSearch();
            })
        },
        exportExcel() {
            this.$refs[this.activeName].exportExcel();
        },
        syncTabSearchTime() {
            this.searchTime[this.activeName] = parseInt(new Date().getTime()/1000);
        }
    },
    created() {
        this.initSearchDate();
        this.syncTabSearchTime();
    }
};
</script>

<style scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>
